<template>
    <div>
        <div class="order-flag">
            <text :style="styles.containerFirstArg">{{orderNumber}}</text>
        </div>
        <div class="container" :style="{'border-color':'black','border-width': '2px',...styles.container}">
            <div @click="getFirstArg" class="container-first">
                <text :style="styles.containerFirstArg">{{firstArg?firstArg.name:'1音'}}</text>
            </div>
            <wxc-mask height="800"
                      width="702"
                      border-radius="0"
                      duration="200"
                      mask-bg-color="#FFFFFF"
                      :has-animation="true"
                      :has-overlay="true"
                      :show-close="true"
                      :show="intervalMenuVisible"
                      @wxcMaskSetHidden="intervalMenuVisible = false">
                <div class="content">
                    <category :color="'#000000'" :text-color="'white'" title="音程位置选择"></category>
                    <wxc-radio :list="intervalPositionBtn" @wxcRadioListChecked="intervalPositionClicked"></wxc-radio>
                    <category :color="'#000000'" :text-color="'white'" title="音程类型选择"></category>
                    <scroller class="scroller" style="height:320px;">
                        <wxc-radio :list="intervalBtn" @wxcRadioListChecked="intervalClicked"></wxc-radio>
                    </scroller>
                    <wxc-button text="确定" type="white" style="width:680px;align-self:center;margin: 2px"
                                @wxcButtonClicked="confirmIntervalMenu"></wxc-button>
                </div>
            </wxc-mask>
            <div @click="popIntervalTypeMenu" class="container-last">
                <text :style="styles.containerFirstArg">{{interval.name&&interval.position?interval.position+interval.name:'请选择音程...'}}</text>
            </div>
        </div>
        <image :style="styles.delBtn" class="container-del-btn" :src="img.delBtn" @click="handleDelete"></image>
    </div>
</template>

<script>
import {data as intervals} from "../../../data/music-interval";
import {computeInterval, getByInterval, getInterval, getMusicFlagByXYValue} from "../../../util/compute";
    import {getImagePath} from "../../../util/path-util";
import {getFormatHeightPX, toast} from "../../../util/common";
    import {WxcMinibar, WxcPopover,WxcMask,WxcRadio,WxcButton } from "weex-ui";
import Category from "../../../components/category";

    export default {
        name: "music-get-by-interval-input",
        components: {Category, WxcPopover,WxcMask,WxcRadio,WxcButton},
        props: {
            uuid: {
                type: String,
                default: ''
            },
            orderNumber: {
                type: String,
                default: '-1'
            }
        },
        data() {
            return {
                intervalMenuVisible:false,
                interval:{
                    position:null,
                    name:null
                },
                //音程选择菜单
                intervalBtn:[],
                intervalPosition: {x: -33, y: 380},
                intervalArrow: {pos: 'right'},
                //上方/下方音程选择菜单
                intervalPositionBtn: [
                    {
                        title: '上方',
                        value: '上方'
                    }, {
                        title: '下方',
                        value: '下方'
                    }
                ],
                intervalPositionPosition: {x: -33, y: 380},
                intervalPositionArrow: {pos: 'right'},
                firstArg: null,
                img: {
                    delBtn: getImagePath('delete')
                },  styles:{
                    container:{
                        height:getFormatHeightPX(60)
                    },
                    orderFlag:{
                    },
                    containerFirstArg: {
                        'font-size': getFormatHeightPX(26)
                    },
                    delBtn:{
                        height:getFormatHeightPX(55)
                    }
                }
            }
        },
        mounted() {
            this.intervalBtn = intervals.map(item=>{return {value:item.result,title:item.result}})
        },
        methods: {
            confirmIntervalMenu(){
              this.intervalMenuVisible = false;
              // toast(this.interval)
                if(this.isFinished()){
                    this.$emit('onFinish',
                        {
                            uuid:this.uuid,
                            index:this.orderNumber,
                            first:this.firstArg,
                            interval:this.interval,
                            result: getByInterval(this.interval.position,this.firstArg,this.interval.name).name
                        })
                }
            },
            intervalPositionClicked({value}) {
                this.interval.position = value;
            },
            intervalClicked({value}){
                this.interval.name = value;
            },
            getFirstArg: function () {
                this.$emit('pushFirstArg', (firstArg, cb) => {
                    this.firstArg = getMusicFlagByXYValue(firstArg.xValue, firstArg.yValue);
                    if (this.isFinished()) {
                        this.$emit('onFinish',
                            {
                                uuid:this.uuid,
                                index:this.orderNumber,
                                first:  this.firstArg ,
                                interval:this.interval,
                                result: getByInterval(this.interval.position,this.firstArg,this.interval.name).name
                            })
                    }
                })
            },
            isFinished() {
                return this.firstArg && this.interval.name&&this.interval.position
            },
            popIntervalTypeMenu() {
                this.intervalMenuVisible = true;
                // this.$refs['intervalTypeMenu'].wxcPopoverShow();
            },
            handleDelete() {
                this.$emit('onDelete');
            }
        }
    }
</script>

<style scoped>
    .container {
        margin-top: 10px;
        margin-bottom: 10px;
        align-self: center;
        width: 300px;
        margin-left: 10px;
        border-radius: 40px;
        border-style: solid;
        justify-content: center;
    }

    .order-flag {
        position: absolute;
        width: 50px;
        left: 10px;
        border-radius: 20px;
        border-style: solid;
        border-color: black;
        border-width: 1px;
        justify-content: center;
        align-items: center;
        top: 10px;
        bottom: 10px;
    }

    .container-first {
        position: absolute;
        left: 15px;
        border-radius: 40px;
        border-style: solid;
        width: 90px;
        border-color: black;
        border-width: 1px;
        justify-content: center;
        align-items: center;
        top: 5px;
        bottom: 5px;
    }

    .container-del-btn {
        position: absolute;
        top: 14px;
        right: 5px;
        width: 50px;
    }

    .container-last {
        position: absolute;
        right: 11px;
        border-radius: 40px;
        border-style: solid;
        width: 170px;
        justify-content: center;
        align-items: center;
        border-color: black;
        border-width: 1px;
        top: 5px;
        bottom: 5px;
    }
</style>
